<template>
<div>
    <div class="control-section">
         <div class="sample-container" id="customIcons">
            <ejs-filemanager id="file" :ajaxSettings='ajaxSettings' :view='view' :showThumbnail='showThumbnail'>
            </ejs-filemanager>
        </div>
    </div>
    <div id="action-description">
        <p>This sample demonstrates the custom thumbnail of the File Manager you can customize with your own icon.</p>
    </div>

    <div id="description">
        <p>The File Manager component is used to explore a file system through a web application, similar to the windows explorer for windows. It supports all the basic file operations such as create, rename, delete and so on.</p>

        <p>
            <b>Note: </b>File Manager's upload functionality is restricted in the online demo. If you need to test upload functionality, please install 
            <a target="_blank" href="https://www.syncfusion.com/downloads"> Syncfusion Essential Studio </a>on your machine and run the demo.
        </p>
    </div>
</div>
</template>
<style>
#customIcons .e-filemanager .e-large-icons .e-fe-image {
    background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-music {
    background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-xlsx {
    background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-video {
    background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-pptx {
    background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-rar {
	background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-zip {
	background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-txt {
	background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-js {
	background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-css {
	background-image: url("");
}

#customIcons .e-filemanager .e-large-icons .e-fe-html {
	background-image: url("");
}

#customIcons .e-filemanager .e-large-icons  .e-fe-unknown {
	background-image: url("");
}

#customIcons .e-filemanager .e-large-icons  .e-fe-exe {
    background-image: url("");
}

#customIcons .e-filemanager .e-large-icons  .e-fe-msi {
    background-image: url("");
}

#customIcons .e-filemanager .e-large-icons  .e-fe-php {
    background-image: url("");
}

#customIcons .e-filemanager .e-large-icons  .e-fe-doc,
#customIcons .e-filemanager .e-large-icons  .e-fe-docx {
    background-image: url("");
}

#customIcons .e-filemanager .e-large-icons  .e-fe-xml {
    background-image: url("");
}

 #customIcons .e-filemanager .e-large-icons .e-fe-folder {
        background-image: url('');
}

</style>
<script>
import Vue from "vue";
import { FileManagerPlugin, NavigationPane, Toolbar, FileManagerComponent } from "@syncfusion/ej2-vue-filemanager";

Vue.use(FileManagerPlugin);
/**
 * File Manager custom thumbnail sample
 */
let hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';

export default Vue.extend ({
     data: function() {
        return {        
           ajaxSettings:
            {
                url: hostUrl + 'api/FileManager/FileOperations',
                getImageUrl: hostUrl + 'api/FileManager/GetImage',
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                downloadUrl: hostUrl + 'api/FileManager/Download' 
            },
            view:"LargeIcons",
            showThumbnail: false
        };
    },
    provide: {
            filemanager: [NavigationPane, Toolbar]
    }
});
</script>

